<template>
  <div class="menulist1" >
<!--      顶部布局-->
      <div class="top">
          <!-- left没什么用，只是为了弹性布局方便 -->
          <div class="left" @click="ret">返回</div>
          <div class="title">菜品列表</div>
          <div class="right" >{{branchname}}</div>
      </div>
    <div class="content1">
      <form action="/">

<!--          van搜索框-->
        <van-search
                v-model="value"
                placeholder="请输入搜索关键词"
                @search="onSearch"

        />
      </form>
<!--        vant标签页-->
        <van-tabs @click="onClick" v-model="name">
            <van-tab title="全部" :name="0"/>
            <van-tab v-for="item in type" :title="item.typename" :name="item.type_id"  />
        </van-tabs >

    </div>
<!--      -->
<!--      vant 宫格布局-->
      <van-grid :column-num="2" :center="false" :border="false" :gutter="10" style="padding-bottom: 10px;" >
          <van-grid-item v-for="item in list"  >
<!--显示图片-->
                  <van-image
                          @click="goodsMsg(item.goodsid,item.branchid)"
                          width="1.5rem"
                          height="1.3rem"
                          radius="15px"
                          fit="cover"
                          :src="item.goods_url" />
<!--显示菜品名-->
                  <div   @click="goodsMsg(item.goodsid,item.branchid)"
                          style="font-size: 25px ;line-height: 50px; font-weight: bold;">{{item.goodsname}}</div>
              <div>
<!--                  显示价格-->
                  <div style="float: left ;" @click="goodsMsg(item.goodsid,item.branchid)" >
                      <div style="color: red ;font-size: 20px ;font-weight: bold;line-height: 25px; ">￥{{item.goods_price}}</div>
                  </div>
<!--购物车没有的时候加入购物车-->
                  <div  v-if ="item.st_num ==0 " style="float: right">
                      <van-button round type="warning" size="mini " icon-position="right" @click="cat(item.branchid,item.goodsid,item.goods_price)">加入购物车</van-button>
                  </div>
<!--购物车中有的时候修改数量-->
                  <div v-if ="item.st_num >0 " style="float: right">
                      <van-button size="mini" @click="addNum(item)">+</van-button>
                      <van-button size="mini">{{item.st_num}}</van-button>
                      <van-button size="mini" @click="reduceNum(item)">-</van-button>
                  </div>

              </div>
          </van-grid-item>

      </van-grid>
      <h1 style="text-align: center">菜品也是有极限的~~</h1>
      <div style="height: 50px"></div>
      <div v-for="item in list">
          <van-goods-action>

              <van-goods-action-icon icon="cart-o" text="购物车" :badge="sum" @click="goCat"/>
              <van-goods-action-button type="danger" text="立即购买"  @click="buy(item)"/>
          </van-goods-action>
      </div>
<!--      底部购物车组件-->

  </div>
</template>

<script>
import MenuListTop from "../components/menuListTop.vue";
import MenuListCont from "../components/menuListCont.vue";
import { Toast } from 'vant';
export default {
  name: "menuList",
  components: {
    MenuListTop,
    MenuListCont,
  },
  data(){
    return{
      list:[],
        goods:[],
      value:"",
        sum:"",
        typeid:"",
        branchname:"",
        branchid:"",
        name:"",
        type:[],


    }
  },
  created() {
      // 路由传参
      var item = sessionStorage.getItem("branchid");
      this.branchid=item
    // let Listid = this.$route.params.Listid;
    // console.log(Listid);
    this.onSearch();
  },
  methods:{
      // 购买

      buy(item){
          if (this.sum==0){
              this.$message.warning("请添加菜品");
              return false;
          }else if(this.sum>0){
              console.log(item)
              this.$http.post('/api/payorder/payorder/submitOrder?branchid='+item.branchid+"&goodsid="+0+"&sum="+this.sum).then(result=>{
              })
              setTimeout(() =>{
                  this.$router.push("/index/orderSettle");
              },1000)
          }
      },
      // 返回
      ret() {
          this.$router.back();
      },
      // 去购物车页面
      goCat(){
          this.$router.push(
               "/index/shopCar"
          );
      },
      // 购物车图标数量计算方法
      sums(){
          //定义
          let sum = 0;
          let branchname="";
          // const tn=[];
          // const q=[];
          // var p=0;
          this.list.forEach((item) => {
              //遍历list这个字段，并累加
              if (item.st_num==null){
                  item.st_num=0
              }
              sum += item.st_num;
              this.branchname=item.branchname
              /*遍历类别*/
              // tn[index]=item.typename
          });

          // for(var i =0;i>tn.length;i++){
          //       if(i===0){
          //           q[0]=tn[0]
          //           p=p+1
          //       }
          //       for(var x=0;x>q.length;x++){
          //           if(tn[i]!==q[x]){
          //               q[p]=tn[i]
          //               p=p+1
          //               this.type=q[p]
          //           }
          //       }
          // }
          //返回
          this.sum = sum;
      },

      //商品数量增加
      addNum(item){
          item.st_num++;
          this.$http.get('/shoppingcar/shoppingTrolley/addNum?gid='+item.goodsid+"&bid="+item.branchid).then(result=>{
          })
          this.sums()
      },

      //商品数量减少
      reduceNum(item){
          if(item.st_num <= 1){
              this.$http.get('/api/shoppingcar/shoppingTrolley/delCat?ctid='+item.st_id).then(result=>{
              })
              item.st_num=0
          }else {
              this.$http.get('/shoppingcar/shoppingTrolley/reduceNum?gid='+item.goodsid+"&bid="+item.branchid).then(result=>{
              })
              item.st_num - 1 > 0 ? item.st_num-- : 0;
          }
          this.sums()

      },
      // 添加进购物车方法
      cat(branchid,goodsid,goodsPrice){
          this.$http.post("/api/shoppingcar/shoppingTrolley/addCat?branchid="+branchid+"&goodsid="+goodsid+"&stNum="+1+"&goodsPrice="+goodsPrice).then(result=>{
              this.onSearch(this.value)
          })
      },

// 去详情页
      goodsMsg(goodsid,branchid) {
          sessionStorage.setItem("goodsid",goodsid),
              sessionStorage.setItem("branchid",branchid),
      this.$router.push({
        name: "menuMsg",
        params:
            { goodsid: goodsid,
                bid:branchid,
            }
      });
    },

      // 标签页方法
      onClick(name, title) {
          this.findAllGoods(this.value,name);
          console.log(name,title)
      },
// 搜索方法
    onSearch() {
      this.findAllGoods(this.value,this.typeid);
    },

      // 显示页面方法
    findAllGoods(val,typeid){
      this.$http.post("/api/goods/goods/selectAll?branchid="+this.branchid+"&name="+val+"&typeid="+typeid).then(result=>{
        if (result.data.code===2000){
          this.list = result.data.data;
          this.findType();
          this.sums();
        }
      })
    },
      findType(){
          this.$http.post("/api/goods/goods/selectType?branchid="+this.branchid).then(result=>{
              console.log(result)
              if (result.data.code===2000){
                  this.type = result.data.data;
                  console.log(this.type)
              }
          })
      }
  }
};
</script>

<style lang='less' scoped>
    .top {
        box-sizing: border-box;
        width: 100%;
        height: 13.3333vw;
        padding: 0 1.6vw;
        display: flex;
        justify-content: space-between;
        background: #e74e40;
        color: white;
        > div {
            text-align: center;
            width: 33%;
            line-height: 13.3333vw;
        }
        .title {
            font-size: 4.8vw;
        }
        .right {
            font-size: 3.7333vw;
        }
    }
.menulist1 {
  .MenuListTop {
    position: fixed;
    top: 0;
    left: 0;
  }
  .content1 {
    padding: 0 4vw;

    .inp {
      font-size: 4.3vw;
      width: 100%;
      height: 10.6667vw;
      border: #e74e40 1px solid;
      margin-top: 5.2vw;
      border-radius: 1.3333vw;
    }
    .sousuo {
      font-size: 5.6333vw;
      font-weight: 600;
      color: rgb(145, 145, 145);
      position: absolute;
      top: 21.9667vw;
      left: 5.6667vw;
    }

    .select {
      margin: 3.0667vw 0;
      text-align: center;
      display: flex;
      justify-content: left;
      .classify,
      .sort {
        background-color: rgba(153, 153, 153, 0.2);
        margin-right: 2.6667vw;
        padding: 1.6vw;
        border-radius: 1.6667vw;
      }
    }
  }

}
.content2 {
  box-sizing: border-box;
  width: 100%;
  padding: 1.0667vw;
  border-bottom: 1px solid #999;
  background-color: rgba(153, 153, 153, 0.3);
  overflow: hidden;
  .msg {
    margin-top: 1.0667vw;
    display: flex;
    align-items: center;
    .left {
      width: 26vw;
      height: 16vw;
      margin-right: 1.0667vw;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      .title {
        font-size: 5.3333vw;
      }
      .price,
      .sales {
        color: red;
        font-size: 3.2vw;
      }
    }
  }
  .numcom {
    float: right;
    display: flex;
    margin-right: 4.6667vw;
    margin-bottom: 1.0667vw;
    span {
      display: block;
      width: 6.6667vw;
      height: 6.6667vw;
      font-size: 4.2667vw;
      text-align: center;
      line-height: 6.6667vw;
      border: 1px solid #999;
      border-radius: 50%;
      margin: 0 1.6vw;
    }
    .num {
      border-radius: 0;
    }
  }
}
</style>